<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="sites/common/head"></head>
<style>
    .pagination-detail div{
        color:#000;
    }
    .navbar-toggle{
        width: 30px;
        height: 30px;
        border-radius: 4px;
        background: #ffffff;
        position: absolute;
        right: 5px;
        top: 13px;
        padding: 3px;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #000;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 16px;
        height: 2.5px;
        border-radius: 1px;
        margin-left: 3px;
    }
</style>

<body style="background: #272626">

<form action="/sites/forwardGameDetail/list" method="get" id="searchForm">
    <input type="hidden" id="nowpage" name="nowpage" value="1">
    <input type="hidden" id="gameId" name="gameId" th:value="${sitesDto.gameId}">
    <input type="hidden" id="articleCategory" name="articleCategory" th:value="${sitesDto.articleCategory}">
</form>
<!--导航-->
<th:block th:replace="sites/common/nav"></th:block>
<!--轮播-->
<div class="swiper-container " style="margin-bottom:-2.2%;" id="bg">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/img/style_guide_bg.jpg" width="100%" height="auto"/></div>
    </div>
    <!--<div class="swiper-pagination"></div>-->
    <!--<div class="swiper-button-next p768"></div>-->
    <!--<div class="swiper-button-prev p768"></div>-->
</div>

<section class="container" style="width:100%;padding:0;margin:0;z-index: 99999999;border: 0" id="float">
    <div class="navbar navbar-default container-fluid" role="navigation" style="background: linear-gradient(to bottom, rgba(39, 38, 38, 1) 0%, rgba(42, 41, 41, 1) 100%);padding:14px;margin:0;border:0">
        <a href="javascript:void(0)" class="hc-logobox pull-left">
            <img src="/img/logo.jpg" style="height: 45px;margin-left: 40px;"/>
        </a>
        <div class="navbar-header">
            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <th:block  th:each=" m : ${sitesDto.dictionaryList}">
                    <li th:if="${m.id eq sitesDto.articleCategory}">
                        <a class="nav-select" th:href="'/sites/forwardGameDetail/list?articleCategory='+${m.id}+'&gameId='+${sitesDto.gameId}" th:text="${m.name}"></a>
                        <input type="hidden" id="articleCategorys" name="articleCategory" th:value="${m.id}">
                        <!--<a class="nav-off" th:href="'/sites/forwardGameDetail/list?articleCategory='+${m.id}+'&gameId='+${sitesDto.gameId}" th:text="${m.value}"></a>-->
                    </li>
                    <li th:if="${m.id ne sitesDto.articleCategory}" >
                        <a class="nav-on" th:href="'/sites/forwardGameDetail/list?articleCategory='+${m.id}+'&gameId='+${sitesDto.gameId}" th:text="${m.name}"></a>
                        <!--<a class="nav-select" th:href="'/sites/forwardGameDetail/list?articleCategory='+${m.id}+'&gameId='+${sitesDto.gameId}" th:text="${m.name}"></a>-->
                        <!--<a class="nav-off" th:href="'/sites/forwardGameDetail/list?articleCategory='+${m.id}+'&gameId='+${sitesDto.gameId}" th:text="${m.value}"></a>-->
                    </li>
                </th:block>
            </ul>
            <div style="float:left;margin-top:10px">
                <input type="text" id="keyword" name="keyword" th:value="${sitesDto.page.keyword}" style="width: 250px;height:30px;background:none;border:1px solid #fff;float:left;color:#fff">
                <button type="button" style="width:50px;height: 30px;background-color:red;color:#fff;float:left;border-radius:10%;margin-left:8px;border:1px solid red" th:onclick="'select('+${sitesDto.gameId}+')'">搜 索</button>
            </div>
        </div>

    </div>
</section>

<section class="container" style="width:90%;padding:0;margin:2% 10% 0 5%">
    <div style="width: 100%">
        <ul style="width:100%;">
            <li th:each="m : ${sitesDto.page.allentities}" style="height:200px;" class="col-sm-6 col-xs-11 container">
                <a th:href="@{'/sites/styleGuideDetail?id='+${m.id}}" class="link">
                    <div style="height: 190px;background: #353535">
                        <div style="width: 30%;height:100%;position:relative;float:left;line-height:90px">
                            <img style="height: 100%;width: 70%;left:0%;"  th:src="${m.imgUrl}" th:if="${m.imgUrl} ne ''">
                            <img style="height: 100%;width: 70%;left:0%;" src="/img/game.png" th:if="${m.imgUrl} eq ''">
                        </div>
                        <!--<div style="width: 30%;height:100%;position:relative;float:left;top:20%;">-->
                        <!--<div style="height:75px;position:relative;text-align: center;display: block;">-->
                        <!--<img style="position:absolute;left:0;width:150px;height:100px;"  th:src="${m.imgUrl}" th:if="${m.imgUrl} ne ''">-->
                        <!--<img style="position:absolute;left:0;width:150px;height:100px;" src="/img/game.png" th:if="${m.imgUrl} eq ''">-->
                        <!--</div>-->
                        <!--</div>-->
                        <div style="width: 70%;padding:2%;height:100%;float:left;color:#fff">
                            <p style="color: #fff;font-size: 14px;margin-top: 1%;width: 100%;margin-bottom: 2%;font-weight:bold;text-align: center" th:text="${m.title}"></p>
                            <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;height:48%;letter-spacing: 2px;line-height:26px;border:1px solid grey">
                                <p style="margin:1% 2%;" th:text="${m.introduction}"></p>
                            </div>
                            <div class="col-sm-6 col-xs-11" style="padding-top:5%">
                                <!--                            <img src="/img/clock.png">-->
                                <span class="fa fa-clock-o"></span>
                                <span th:text="${m.createTime}"></span>
                            </div>
                            <div class="col-sm-6 col-xs-11" style="padding-top:5%">
                                <!--                            <img src="/img/author.png">-->
                                <span class="fa fa-user-o"></span>
                                <span th:text="${m.author}"></span>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <div style="width: 100%;padding-top:5%;float:left;color:#fff">
        <th:block th:replace="common/page"></th:block>
    </div>
    <script type="text/javascript">
        function jumpPage(pageno) {
            if(pageno<1) {
                alert('请输入正整数');
            } else {
                $('#nowpage').val(pageno);
                $('#articleCategory').val($('#articleCategorys').val());
                $('#searchForm').submit();
            }
        }
    </script>
</section>
<!--&lt;!&ndash;底部&ndash;&gt;-->
<th:block th:replace="sites/common/footer"></th:block>


</body>

</html>

<script>


    // $(function(){
    //     var header_height = $("#bg").offset().top;
    //     alert(header_height);
    //     var oDiv = document.getElementById("float");
    //     $(window).scroll(function(){
    //         var this_scrollTop = $(this).scrollTop();
    //         if(this_scrollTop=header_height ){
    //             oDiv.style = "position:fixed;top:0;width:100%";
    //         }else{
    //             oDiv.style = "width:100%;padding:0;margin:0";
    //         }
    //     });
    // });

    window.onload=
        function(){
            var oDiv = document.getElementById("float"),
                H = 0,
                Y = oDiv
            while (Y) {H += Y.offsetTop; Y = Y.offsetParent}
            window.onscroll = function()
            {
                var s = document.body.scrollTop || document.documentElement.scrollTop
                if(s>H) {
                    oDiv.style = "position:fixed;top:0;width:100%;border:0;padding:0;margin:0;z-index: 1"
                } else {
                    oDiv.style = "width:100%;border:0;padding:0;margin:0"
                }
            }
        }

    function select(gameId) {
        var keyword=$("#keyword").val();
        var articleCategorys=$("#articleCategorys").val();
        window.location.href="/sites/forwardGameDetail/list?articleCategory="+articleCategorys+"&gameId="+gameId+"&keyword="+keyword+"&nowpage=1";
    }
</script>

